import React from 'react'
import QRCode from 'qrcode.react';
import { Card, ProgressBar, } from 'antd-mobile'
import { InformationCircleOutline } from 'antd-mobile-icons'

export default function GrowthLevel() {
    let obj = { name: '西瓜', img: 'https://img2.baidu.com/it/u=2900710564,2408084692&fm=253&fmt=auto&app=138&f=JPEG' }
    return (

        <Card >
            {/* 用户个人信息 */}
            <div style={{ marginLeft: '1%', display: 'flex', }}>
                < img src={obj.img} alt="" 
                style={{ width: '4.5em',height:"4.5em", border: '0.3em white solid', borderRadius: '50%' }}
                 />
                <div style={{ marginLeft: '6%', }}>
                    <div style={{ fontSize: 'large', marginTop: '5%' }}>Hi，{obj.name}</div>
                    <div style={{ color: 'rgb(153,153,153)', marginTop: '5%' }}>成长值12/200</div>
                    <div style={{ width: '160%', marginTop: '10%' }}>
                        <ProgressBar percent={20} style={{ '--track-color': 'rgb(216,216,216)', '--fill-color': 'rgb(255,102,0)', '--track-width': '5px', }} />
                    </div>
                </div>
                <div style={{ textAlign: 'center', marginLeft: '31%', marginTop: '2%' }}>
                    <QRCode
                        value="https://zengwu.com.cn" //value参数为字符串类型
                        size={50} //二维码的宽高尺寸
                        fgColor="#000000"  //二维码的颜色
                    />
                </div>

            </div>
        </Card>

    )
}
